<template>
  <div v-if="active === 'property'">
    <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="标签">
        <el-input v-model="currentApp.label" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="LOGO">
        <LogoEditor v-model="currentApp.logo" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="注释" :span="column">
        <el-input type="textarea" v-model="currentApp.comment" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="版本">
        <el-input v-model="currentApp.version" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="版权">
        <el-input v-model="currentApp.copyright" />
      </ElDescriptionsItem>    
      <ElDescriptionsItem label="使用库">
        <el-select v-model="currentApp.libs" multiple>
          <el-option label="<无>" value="" />
        </el-select>
      </ElDescriptionsItem>
    </ElDescriptions>
    <!-- <div class="bg-green flex items-center h30px pl5px color-#FFF mt10px">数据库连接信息</div>
    <DatasourceEditor v-model="currentApp.datasource" /> -->
    <div class="bg-green flex items-center h30px pl5px color-#FFF mt10px">分组信息</div>
    <GroupList />
    <!-- <el-table :data="groups" border class="wfull">
      <el-table-column prop="name" label="名称" :width="150" />
      <el-table-column prop="label" label="标签" :width="280" />
      <el-table-column label="图标" :width="120">
        <template #default="{ row }">
          <IconPicker v-model="row.icon" />
        </template>
      </el-table-column>
      <el-table-column label="分组项">
        <template #default="{ row }">
          <div>{{ row.items }}</div>
        </template>
      </el-table-column>
      <el-table-column :width="150">
        <template #header>
          <OperateBar :operates="['add', 'batch-add']" @add="addGroup" @batch-add="batchAddGroup" />
        </template>
        <template #default="{ row }">
          <OperateBar :operates="['edit', 'remove']" @edit="editGroup(row.name)" @remove="removeGroup(row.name)" />
        </template>
      </el-table-column>
    </el-table> -->
  </div>
  <ComponentEditor v-if="active === 'component'" type="layout" v-model:component="currentApp.component" v-model:component-props="currentApp.componentProps" />
  <LayoutEditor v-if="active === 'layout'" v-model="currentApp.layout" />
</template>
<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem, ElInput, ElSelect, ElOption, ElTable, ElTableColumn } from 'element-plus';
  import { active, currentApp } from '@/views/seed-dev';
  import { ComponentEditor } from '../../ComponentEditor';
  import { LayoutEditor } from '../../LayoutEditor';
  import { LogoEditor } from '../../LogoEditor';
  import { DatasourceEditor } from '../../DatasourceEditor';
  import { computed } from 'vue';
  import { Icon } from '@/components/Icon';
  import { open } from '@/components/Popup';
  import { GroupCreator, GroupList } from '../../GroupEditor';
  import { OperateBar } from '../../OperateBar';
import GroupBatchEditor from '../../GroupEditor/src/GroupBatchEditor.vue';

  const column = 2

  const groups = computed(() => {
    const ret = []
    const groups = currentApp.value.groups
    if(!groups) return ret
    for(const groupName in groups) ret.push({ ...groups[groupName], name: groupName })
    return ret
  })

  function addGroup() {
    open({title: '创建分组'}, GroupCreator, { type: 'app'})
  }

  function batchAddGroup() {

  }

  function editGroup(groupName: string) {

  }

  function removeGroup(groupName: string) {
    delete currentApp.value.groups[groupName]
  }
</script>